<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
	body{
		margin:0;
	}
	.box{
		width:1250px;
		height:500px;
		margin: 50px auto 0;
		position:relative;
	}
	.box .item{
		width:230px;
		height:150px;
		border:1px solid #999;
		float:left;
		margin:9px;
		background:url("./images/clients.png");
		transition:all 500ms;
	}
	.box .cover{
		width:230px;
		height:150px;
		background:rgba(0,0,0,0.4);
		position:absolute;
		left:10px;
		top:10px;
		transition:all 500ms;
		z-index:-666;
	}
  </style>
 </head>
 <body>
	<div class="box">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>	
		<div class="cover"></div>
	</div>
	<script type="text/javascript">
		var aItem = document.getElementsByClassName('item');
		var oCover = document.getElementsByClassName('cover')[0];
		for(var i = 0, len = aItem.length; i < len; i++){
			aItem[i].style.backgroundPosition = ""+(i * - 230)+"px 0px"
			aItem[i].onmousemove = function (e) {
				var _left = this.offsetLeft + 1;
				var _top = this.offsetTop + 1;
				oCover.style.left = _left + 'px';
				oCover.style.top = _top + 'px';
				this.style.backgroundPositionY = '-150px';
				this.onmouseleave = function() {
					this.style.backgroundPositionY = 0;
				}
			}
		}
	</script>
 </body>
</html>
